<!--
 * @Description: 用户管理页面
 * @Author: 陈三愿
 * @Date: 2025-09-14 22:55:00
 * @LastEditTime: 2025-09-14 22:55:00
-->
<script setup lang="ts">
import { ref } from 'vue';

// 模拟用户数据
const users = ref([
  { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员' },
  { id: 2, name: '李四', email: 'lisi@example.com', role: '编辑' },
  { id: 3, name: '王五', email: 'wangwu@example.com', role: '用户' },
  { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: '用户' },
]);
</script>

<template>
  <div>
    <h1 class="text-2xl font-bold mb-4">用户管理</h1>
    
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <h2 class="card-title">用户列表</h2>
        
        <div class="overflow-x-auto">
          <table class="table w-full">
            <thead>
              <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>角色</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="user in users" :key="user.id">
                <td>{{ user.id }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.email }}</td>
                <td>{{ user.role }}</td>
                <td>
                  <div class="flex space-x-2">
                    <button class="btn btn-xs btn-primary">编辑</button>
                    <button class="btn btn-xs btn-error">删除</button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        
        <div class="card-actions justify-end mt-4">
          <button class="btn btn-primary">添加用户</button>
        </div>
      </div>
    </div>
  </div>
</template>